// 将自定义ref msg 封装为一个hooks
import { customRef } from "vue";

export default function (initValue: string, delay: number) {
  // 使用自定义ref(customRef)去定义响应式数据
  let timer: number;
  // track：跟踪  trigger：触发
  let msg = customRef((track, trigger) => {
    return {
      // get何时被调用：msg被读取时调用
      get() {
        track(); // 告诉Vue数据msg很重要,你要对msg进行持续关注,一旦msg变化就去更新
        return initValue;
      },
      // set何时被调用：msg被修改时调用
      set(value) {
        console.log("msg被修改了", value);
        // 实现一秒钟后再更新数据
        clearTimeout(timer);
        timer = setTimeout(() => {
          initValue = value; // 修改数据
          trigger(); // 通知Vue数据msg变化了
        }, delay);
      },
    };
  });
  return { msg };
}
